<template>
  <transition name="fade">
    <div class="progressPanel" v-show="panelShow">
      <!-- 标题 -->
      <div class="title">{{ title }}</div>
      <!-- 进度条列表 -->
      <div class="progressList" ref="progressListRef">
        <div
          v-for="(data, index) in progressList"
          :key="index"
          :class="data.progress != 100 ? 'bar' : 'bar-hidden'"
        >
          <p>{{ data.title }}</p>
          <el-progress :percentage="data.progress" />
        </div>
      </div></div
  ></transition>
</template>

<script>
/*eslint-disable*/
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted, ref, watch } from "vue";

export default {
  name: "进度面板",
  data() {
    return {
      subList: [],
      title: "测试项目标题",
      panelShow: false,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const progressList = ref([]);
    const progressListRef = ref(null);

    onMounted(() => {
      proxy.subList.push(
        // 面板初始化/关闭
        pubsub.subscribe("progressPanelShow", (n, data) => {
          console.log(data);
          progressList.value = [];
          // 面板显示控制
          proxy.panelShow = data.show;
          if (!data.show) return;
          // 面板标题
          proxy.title = data.title;
          // 进度条标题
          data.list.forEach((element) => {
            progressList.value.push({
              title: element,
              progress: 0,
            });
          });
          // console.log(progressList.value);
        }),
        // 进度更新
        pubsub.subscribe("progressRenew", (n, data) => {
          progressList.value.forEach((element) => {
            if (element.title === data.title) element.progress = data.progress;
          });
        })
      );
    });

    watch(
      progressList,
      (newValue, oldValue) => {
        //监听数组变化情况
        let i = 0;
        newValue.forEach((element) => {
          if (element.progress === "100") i++;
        });
        // 全部加载完成时关闭面板显示
        if (i === progressList.value.length)
          setTimeout(() => {
            proxy.panelShow = false;
          }, 1000);
      },
      { deep: true }
    );

    return { progressListRef, progressList };
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
@import "../less/variables.less";
.progressPanel {
  padding: 1%;
  border-radius: 5px;
  box-shadow: @box-shadow;
  background-color: white;
  text-align: right;
  min-width: 200px;
  > .title {
    color: @red;
    font-weight: bold;
    font-size: 125%;
  }
  > .progressList {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 800px;
    > div {
      margin: 10%;
    }
    > div:last-child {
      margin-bottom: 5%;
    }
  }

  /* 滚动条宽度 */
  .progressList::-webkit-scrollbar {
    width: 5px;
  }

  /* 滚动条轨道 */
  .progressList::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* 滚动条滑块 */
  .progressList::-webkit-scrollbar-thumb {
    background-color: @red;
    border-radius: 6px;
    border: 1px solid #f1f1f1; /* 可选：设置滑块边框 */
  }
}
.fade-enter-active {
  transition: all 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  transition: 0.5s;
  transform: translateX(100%);
}
</style>